<template>
  <div class="login-page">
    <div class="login-container">
      <div class="login-card">
        <div class="card-content">
<!--          <div class="icon-wrapper">-->
<!--            <img src="../assets/vue1.svg" alt="生日蛋糕" class="cake-icon">-->
<!--          </div>-->
          <h2 class="title">🎂</h2>
          <h2 class="title">生日快乐</h2>
          <p class="subtitle">输入密语，开启你的生日惊喜</p>

          <form class="login-form" @submit.prevent="handleSubmit">
            <div class="form-group">
              <input
                  type="text"
                  v-model="formData.username"
                  required
                  placeholder="用户名"
                  :disabled="loading"
              >
            </div>
            <div class="form-group">
              <input
                  type="password"
                  v-model="formData.password"
                  required
                  placeholder="密码"
                  :disabled="loading"
              >
            </div>
            <button
                type="submit"
                class="submit-btn"
                :disabled="loading"
            >
              开启惊喜
            </button>
          </form>

          <p class="tip">* 输入你的密语即可开启专属于你的生日惊喜</p>

          <div class="footer">
            <span class="heart">❤️</span> 愿这充满祝福的墙
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useUserStore } from '../stores/user'
import { userApi } from '../api/user'
import {message} from "ant-design-vue";

const route = useRoute()
const router = useRouter()
const userStore = useUserStore()

const loading = ref(false)
const error = ref('')
const formData = reactive({
  username: '',
  password: ''
})

// 处理表单提交
const handleSubmit = async () => {
  if (loading.value) return
  error.value = ''

  loading.value = true
  try {
    // 发送登录请求
    await userApi.login({
      userAccount: formData.username,
      userPassword: formData.password
    })

    // 获取用户信息
    const userRes = await userApi.getLoginUser()

    // 保存用户信息
    userStore.setUser(userRes.data)

    // 登录成功后，检查是否有重定向地址
    const redirect = route.query.redirect
    if (redirect) {
      router.push(redirect)
    } else {
      router.push('/') // 默认跳转到首页
    }
    message.success('登录成功')
  } catch (err) {
    error.value = err.message || '登录失败，请重试'
    message.error('用户名或密码错误！')
  } finally {
    loading.value = false
  }
}

// 如果已登录，直接跳转到主页
onMounted(() => {
  if (userStore.isLoggedIn) {
    router.push('/wishes')
  }
})
</script>


<style scoped>
.login-page {
  width: 100vw;
  height: 100vh;
  background-color: #ffc0cb;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.login-container {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  padding: 20px;
}

.login-card {
  background: white;
  border-radius: 24px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.12);
  padding: 40px 20px;
}

.card-content {
  width: 100%;
  max-width: 340px;
  margin: 0 auto;
}

.icon-wrapper {
  text-align: center;
  margin-bottom: 16px;
}

.cake-icon {
  width: 48px;
  height: 48px;
}

.title {
  color: #ff6b81;
  font-size: 24px;
  text-align: center;
  margin: 0 0 8px;
  font-weight: 600;
}

.subtitle {
  color: #666;
  font-size: 14px;
  text-align: center;
  margin-bottom: 32px;
}

.login-form {
  margin-bottom: 16px;
}

.form-group {
  margin-bottom: 16px;
}

input {
  width: 100%;
  height: 44px;
  padding: 0 16px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  font-size: 14px;
  background: white;
  transition: all 0.3s;
}

input:focus {
  outline: none;
  border-color: #ff6b81;
  box-shadow: 0 0 0 2px rgba(255, 107, 129, 0.1);
}

input::placeholder {
  color: #999;
}

.submit-btn {
  width: 100%;
  height: 44px;
  background: #ff6b81;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s;
}

.submit-btn:hover:not(:disabled) {
  background: #ff5268;
}

.submit-btn:disabled {
  background: #ffb3bd;
  cursor: not-allowed;
}

.tip {
  font-size: 12px;
  color: #999;
  text-align: center;
  margin: 16px 0;
}

.footer {
  text-align: center;
  color: #666;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.heart {
  color: #ff6b81;
  animation: heartbeat 1.5s ease-in-out infinite;
}

@keyframes heartbeat {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

/* 响应式设计 */
@media (max-width: 480px) {
  .login-container {
    padding: 16px;
  }

  .login-card {
    padding: 32px 16px;
  }

  .title {
    font-size: 20px;
  }

  .subtitle {
    font-size: 13px;
  }
}

/* 处理超高屏幕 */
@media (min-height: 800px) {
  .login-card {
    padding: 48px 20px;
  }
}

/* 处理超窄屏幕 */
@media (max-width: 320px) {
  .login-container {
    padding: 12px;
  }

  .login-card {
    padding: 24px 12px;
  }

  input, .submit-btn {
    height: 40px;
  }
}
</style>